<html>
<head>
	<link href="css/start/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>
	<link href="css/modal.css" rel="stylesheet" type="text/css" />
	<link href="css/main.css" rel="stylesheet" type="text/css"/>
	
	<!-- Import all our scripts including jquery, jquery ui, protovis and our custom scripts -->
	<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript" src="js/protovis-r3.2.js"></script>
	<script type="text/javascript" src="js/course.js"></script>
	<script type="text/javascript" src="js/scatterplot.js"></script>
	<script type="text/javascript" src="js/heatmap.js"></script>
	<script type="text/javascript" src="js/interactions.js"></script>	
	<script type="text/javascript" src="js/modalWindow.js"></script>

	<title>Team-CC</title>

	<script>
	// Sets up tabs
	$(function() {
		// Uses jQuery's tabs function to create nice tabs
		$( "#tabs" ).tabs({
			ajaxOptions: {
				error: function( xhr, status, index, anchor ) {
					$( anchor.hash ).html(
						"Couldn't load this tab. We'll try to fix this as soon as possible. " +
						"If this wouldn't be a demo." );
				}
			},
			// Only show certain parts of the interactions/filtering box depending on the 
			//  visualization being shown
			show: function(event, ui) {
				// Don't show it on the welcome page
				if ( ui.index)
					$("#interactions").css("display", "block");
				else 
					$("#interactions").css("display", "none");
				// Don't show it on the heatmap page since it is not based on classes
				if(ui.index == 3) {
					$("#interactions").css("display", "none");
				}
				// Only show ordering buttons on the bar chart
				if (ui.index == 1) {
					$("#radio").css("display", "block");
					$("#radiop").css("display", "block");
				}
				else {
					$("#radio").css("display", "none");
					$("#radiop").css("display", "none");
				}
				// Only show title on bar and scatterplot visualizations
				if (ui.index == 1 || ui.index ==2) {
					$("#info").css("display", "block");
				} else {
					$("#info").css("display", "none");
				}
				
			}
		});
	});
	</script>
	
</head>

<body>

	<script type="text/javascript">
		//globals
		var vis_scat, vis_bar, vis_heat;
		var data, cios_data; 
		// Set some defaults for globals
		var department = "CS";
		var course_number = "4460";
		var semester_start = 1; 
		var semester_end = 19;
		var start_gpa = 0.0;
		var end_gpa = 4.0;
		var professors = [];
		var sort_type = "date";
		var pp_enable = false;

		// Get window width and height (copied from online)		
		var winW = 630, winH = 460;
		if (document.body && document.body.offsetWidth) {
		 winW = document.body.offsetWidth;
		 winH = document.body.offsetHeight;
		}
		if (document.compatMode=='CSS1Compat' &&
		    document.documentElement &&
		    document.documentElement.offsetWidth ) {
		 winW = document.documentElement.offsetWidth;
		 winH = document.documentElement.offsetHeight;
		}
		if (window.innerWidth && window.innerHeight) {
		 winW = window.innerWidth;
		 winH = window.innerHeight;
		}

		
		var interactionsWidth = 290; 
		$(function() {
			// Set the width of the interactions window
			$("#interactions").css("width", interactionsWidth + "px");
			// Set the proffesors scroll window
			$("div.scroll").css("width", interactionsWidth - 30 + "px");
			// Create nice buttons for sort by function
			$("#radio").buttonset();
		});
	</script>

	<div id="tabs">
		<!-- Tab Creation -->
		<ul>
			<li><a href="#tabs-1">Welcome</a></li>
			<li><a href="#tabs-2">Bar Chart</a></li>
			<li><a href="#tabs-3">Scatter Plot</a></li>
			<li><a href="#tabs-4">Heat Map</a></li>
		</ul>
		
		<br/>
		<!-- Interaction Widgets -->
		<div id="interactions">
		<div class="ui-widget">
			Search for Class: <input id="autocomplete" />
		</div>
		<p id="radiop">Sort By: </p>
		<div id="radio">
			<input class="sort" type="radio" id="date" name="radio" checked="checked"/><label for="date">Date</label>
			<!--<input class="sort" type="radio" id="professor" name="radio" checked="checked"/><label for="professor">Professor</label>-->
			<input class="sort" type="radio" id="gpa" name="radio" /><label for="gpa">GPA</label>
		</div>
		<p>
			<label for="amount">Semester Range:</label>
			<input type="text" id="amount" class="slider" />
		</p>
		<div id="slider-range-semester"></div>
		<p>
			<label for="amount-gpa">GPA Range:</label>
			<input type="text" id="amount-gpa" class="slider" />
		</p>
		
		<div id="slider-range-gpa"></div>
		<p><label for="profs">Toggle Professors:</label>
		<div class="scroll"><div id="profs"></div>	</div>
		</div>

		<div id="info"></div>
		
		<!-- Tab Contents -->
		<div id="tabs-1">
			<p>Welcome! Click on the tabs to get started! :)</p>
		</div>
		<div id="tabs-2" class="vis">
			<script type="text/javascript">
			// Refresh data
			get_data(department,course_number,{});
			// Redraw course visualization
			course();
			// Enable professor filtering
			if (!pp_enable) {
				pp();
				pp_enable = true;
			}
			</script>
		</div>
		<div id="tabs-3" class="vis">
			<script type="text/javascript">
			get_data(department,course_number,{});
			scatterplot();
			if (!pp_enable) {
				pp();
				pp_enable = true;
			}
			</script>	
		</div>
		<div id="tabs-4" class="vis">
			<h3>CIOS Score Averages by Department</h3>
			<h4>Course seemed well planned and organized (1-5)</h4>
			<script type="text/javascript">
			//get_data(department,course_number,{});
			get_cios_data();
			heatmap();
			</script>
		</div>

	</div>
</body>
</html>
